<template>
  <div>
    <pageHeader :title="title" :bread-crumb="breadCrumb" :show-back="true">
      <template #buts>
        <a-button type="primary" @click="setAuditTeam">新增审核组</a-button>
      </template>
    </pageHeader>
    <tableTurn style="margin: 20px" :tableData="getData" ref="tableRef">
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="150"
        title="审批组名称"
        data-index="name"
      >
      </a-table-column>
      <a-table-column
        title="创建时间"
        :width="150"
        data-index="createdAt"
        align="center"
        ><template #cell="{ record }">
          {{ dayjs(record.createdAt).format('YYYY - MM - DD') }}
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="100"
        title="操作"
        data-index="number"
        ><template #cell="{ record }">
          <a-space>
            <a-tooltip content="编辑">
              <IconFont
                type="icon-details-def"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
                @click="edit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除">
              <a-popconfirm
                content="确认删除？"
                type="error"
                @ok="del(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer',
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>
  </div>
  <AddAuditTeam
    v-if="modelVisible"
    v-model:visible="modelVisible"
    @addAuditTeam="addAuditTeam"
    :formData="form"
    :title="modelTitle"
  />
</template>

<script lang="ts" setup>
  import { reactive, ref, defineAsyncComponent } from 'vue';
  import { useRouter } from 'vue-router';
  import {
    addFlowProcess,
    getFlowProcessAll,
    putFlowProcess,
    delFlowProcess,
  } from '@/api/order-management/client-order/index';
  import { cloneDeep } from 'lodash';
  import dayjs from 'dayjs';
  import AddAuditTeam from './AddAuditTeam.vue';

  const router = useRouter();
  const tableRef = ref();
  const title: string = '需求审核列表';
  const modelTitle = ref('新增审核组');
  const breadCrumb: string[] = ['设备管理', '基础设置', '需求审核列表'];
  const modelVisible = ref(false);
  const form = ref({});
  const setAuditTeam = () => {
    modelTitle.value = '新增审核组';
    form.value = {
      name: '',
      flowStaffIds: [],
    };
    modelVisible.value = true;
  };

  const getData = async (page: any) => {
    try {
      const res = getFlowProcessAll({ ...page });
      return Promise.resolve(res);
    } catch (err: any) {
      console.log(err);
    }
  };

  const addAuditTeam = async (formData: any) => {
    console.log(6, formData);

    if (formData.id) {
      formData.flowStaffIds = formData.flowStaffIds.join(',');
      await putFlowProcess({ ...formData });
      tableRef.value.loadData();
    } else {
      formData.flowStaffIds = formData.flowStaffIds.join(',');
      await addFlowProcess({ ...formData });
      tableRef.value.loadData();
    }
  };

  const edit = (value: any) => {
    modelTitle.value = '编辑审核组';
    let msg = cloneDeep(value);
    msg.flowStaffIds = msg.flowStaffIds.split(',');
    msg.flowStaffIds = msg.flowStaffIds.map(Number);
    form.value = msg;
    modelVisible.value = true;
  };

  const del = async (id: number) => {
    await delFlowProcess({ id });
    tableRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .number-setting {
    padding: 20px;

    .icon {
      cursor: pointer;
    }
    .icon-plus {
      color: #165dff;
      margin-right: 10px;
    }
    .icon-minus {
      color: red;
    }
  }
</style>
